<template>
  <div>
    <a-modal v-model:visible="visible" :width="700" title="编辑主合同" :bodyStyle="bodyStyle"  @ok="handleOk">
      <a-form :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row gutter="16">
          <a-col :span="10">
            <a-form-item name="dragger" no-style>
              <a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
                <div class="dragger-img">
                  <img src="@/assets/images/ResourceContract/file.png" alt="">
                </div>
                <p class="ant-upload-text" :style="{color: '#2C3749'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
                <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '14px'}" >支持pdf, word格式</p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
          <a-col :span="14">
            <div class="form-item-border">
              <a-form-item label="贸易类型">
                <a-select :bordered="false" placeholder="请选择贸易类型" :options="areas" />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="贸易主体">
                <a-select :bordered="false" placeholder="请选择贸易主体" :options="areas" />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="合同签订日期">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="合作方-A">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="合作方-B">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn">取消</a-button>
          <a-button key="submit" @click="handleOk" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {ref} from "vue";
const visible = ref(false);
const bodyStyle = ref({})
const areas = ref([
  {
    label: '长协-DNS-2020.02.10',
    value: 'a'
  }
])
const labelCol = ref(
    {
      style: {
        width: '100px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = ref({
  value1: '',
  value2: '-',
  dragger: [],
  inputNumber: 1,
  datePicker: '',
  v2: 'ab',
  v3: 'avb',
  v4: 'arwf',
  v5: 'avvbb'
})
const showModal = () => {
  visible.value = true;
};
const handleOk = e => {
  console.log(e);
  visible.value = false;
};
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.from-btn-right {
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  // box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
.dragger-img {
  img {
    width: 164px;
    height: 114px;
  }
}
</style>
